// 主样式文件
@use 'variables' as *;
@use 'breakpoints' as *;

// 全局样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

// 主题变量
:root {
  // 浅色主题
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --accent-primary: #3b82f6;
  --accent-secondary: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --chart-bg: #ffffff;
  --chart-grid: #f1f5f9;
}

// 深色主题
.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --border-primary: #334155;
  --border-secondary: #475569;
  --accent-primary: #60a5fa;
  --accent-secondary: #a78bfa;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --chart-bg: #1e293b;
  --chart-grid: #334155;
}

// 通用组件样式
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1rem;
}

// 全屏布局
.full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
  
  &--primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }
  
  &--secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
  }
  
  &--ghost {
    @apply bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800;
  }
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

// 图表容器样式
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

// 响应式网格
.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  @media (min-width: 1280px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

// 动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from {
  transform: translateY(20px);
  opacity: 0;
}

.slide-up-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
